<template>
  <div class="home">
    <Header />
    <div class="nav">
      <div class="content">
        <div class="logo">
          <img src="/src/assets/logo.png" alt="小米logo" style="height: 56px; width: 56px;"/>
        </div>
        <div class="menu"> 
          <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect">
              <el-menu-item 
                v-for="(item, index) in menuItems" 
                :key="index" 
                :index="String(index + 1)"
                @mouseenter="handleMouseEnter(index)"
                @mouseleave="handleMouseLeave">
                {{ item.name }}
              </el-menu-item>
          </el-menu>
          <SubMenu 
            v-model="showSubMenu" 
            :current-index="currentMenuIndex" 
            @mouseenter="handleSubmenuEnter"
            @mouseleave="handleSubmenuLeave"
          />
        </div>
        <div class="search">
          <div class="search-box">
            <input type="text" placeholder="Redmi K80" @focus="handleSearchFocus" @blur="handleSearchBlur">
            <button class="search-btn">
              <el-icon><Search /></el-icon>
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 主要内容区 -->
    <div class="main-content">
      <!-- 轮播图 -->
      <div class="banner">
        <el-carousel height="460px">
          <el-carousel-item>
            <img src="../assets/br.png" alt="banner1">
          </el-carousel-item>
          <el-carousel-item>
            <img src="../assets/br2.jpg" alt="banner2">
          </el-carousel-item>
        </el-carousel>
      </div>

      <!-- 产品分类 -->
      <div class="category-section container">
        <div class="category-list">
          <a href="#" class="category-item">
            <img src="../assets/phone1.png" alt="手机">
            <span>手机</span>
          </a>
          <a href="#" class="category-item">
            <img src="../assets/TV.png" alt="电视">
            <span>电视</span>
          </a>
          <a href="#" class="category-item">
            <img src="../assets/computer.png" alt="笔记本">
            <span>笔记本</span>
          </a>
          <a href="#" class="category-item">
            <img src="../assets/pad.png" alt="平板">
            <span>平板</span>
          </a>
          <a href="#" class="category-item">
            <img src="../assets/appliances.png" alt="生态">
            <span>生态</span>
          </a>
        </div>
      </div>

      <!-- 产品展示区 -->
      <div class="product-section container">
        <div class="section-header">
          <h2>手机</h2>
          <a href="#" class="more">查看更多</a>
        </div>
        <div class="product-list">
          <div class="product-card" v-for="i in 8" :key="i">
            <img src="../assets/phone1.png" alt="产品图片">
            <h3>Redmi K70 Pro</h3>
            <p class="desc">第三代骁龙8 移动平台</p>
            <p class="price">3299元起</p>
          </div>
        </div>
      </div>

      <!-- 电视产品展示区 -->
      <div class="product-section container">
        <div class="section-header">
          <h2>电视</h2>
          <a href="#" class="more">查看更多</a>
        </div>
        <div class="product-list">
          <div class="product-card" v-for="i in 8" :key="i">
            <img src="../assets/TV.png" alt="产品图片">
            <h3>小米电视6 65" OLED</h3>
            <p class="desc">OLED 自发光屏幕</p>
            <p class="price">6999元起</p>
          </div>
        </div>
      </div>
    </div>
    
    <Footer />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { Search } from '@element-plus/icons-vue';
import SubMenu from '../components/SubMenu.vue';
import Header from '../components/Header.vue';
import Footer from '../components/Footer.vue';

const activeIndex = ref('1');
const showSubMenu = ref(false);
const currentMenuIndex = ref(0);
let mouseTimer = null;

const menuItems = [
  { name: 'Xiaomi手机', hasSubmenu: true },
  { name: 'REDMI手机', hasSubmenu: true },
  { name: '电视', hasSubmenu: true },
  { name: '笔记本', hasSubmenu: true },
  { name: '平板', hasSubmenu: true },
  { name: '家电', hasSubmenu: true },
  { name: '路由器', hasSubmenu: true },
  { name: '服务中心', hasSubmenu: false },
  { name: '社区', hasSubmenu: false }
];

const handleSelect = (key) => {
  console.log(key);
};

const handleMouseEnter = (index) => {
  if (mouseTimer) {
    clearTimeout(mouseTimer);
  }
  if (menuItems[index].hasSubmenu) {
    currentMenuIndex.value = index;
    showSubMenu.value = true;
  }
};

const handleSubmenuEnter = () => {
  if (mouseTimer) {
    clearTimeout(mouseTimer);
  }
  showSubMenu.value = true;
};

const handleSubmenuLeave = () => {
  handleMouseLeave();
};

const handleMouseLeave = () => {
  mouseTimer = setTimeout(() => {
    showSubMenu.value = false;
  }, 200);
};

const handleSearchFocus = (e) => {
  e.target.parentElement.classList.add('focus');
};

const handleSearchBlur = (e) => {
  e.target.parentElement.classList.remove('focus');
};
</script>

<style lang="scss" scoped>
.home {
  width: 100vw;
  
  .nav {
    margin-top: 20px;
    position: relative;
    
    .content {
      width: 1226px;
      margin: 0 auto;
      display: flex;
      align-items: center;
    }
    .logo {
      width: 56px;
      height: 56px;
      margin-right: 172px;
    }
    .menu {
      flex: 1;
      .el-menu-demo {
        background-color: #fff;
        border-bottom: none;
        font-size: 16px;
        color: #333;
        
        .el-menu-item {
          padding: 0 20px;
          height: 56px;
          line-height: 56px;
          
          &:hover {
            color: #ff6700;
          }
        }
      }
    }
    
    .search {
      .search-box {
        display: flex;
        align-items: center;
        width: 296px;
        height: 50px;
        border: 1px solid #e0e0e0;
        
        &.focus {
          border-color: #ff6700;
          .search-btn {
            border-color: #ff6700;
            background-color: #ff6700;
            color: #fff;
          }
        }
        
        input {
          flex: 1;
          height: 100%;
          padding: 0 15px;
          border: none;
          outline: none;
          font-size: 14px;
          
          &::placeholder {
            color: #b0b0b0;
          }
        }
        
        .search-btn {
          width: 52px;
          height: 48px;
          border: 1px solid #e0e0e0;
          background-color: #fff;
          color: #616161;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: all 0.2s;
          
          &:hover {
            background-color: #ff6700;
            color: #fff;
            border-color: #ff6700;
          }
          
          .el-icon {
            font-size: 18px;
          }
        }
      }
    }
  }

  .main-content {
    .banner {
      margin-top: 20px;
      .el-carousel {
        :deep(.el-carousel__item) {
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
      }
    }

    .category-section {
      margin-top: -20px;
      position: relative;
      z-index: 1;

      .category-list {
        background: #fff;
        border-radius: 4px;
        padding: 20px;
        display: flex;
        justify-content: space-around;
        box-shadow: 0 2px 4px rgba(0,0,0,.1);

        .category-item {
          text-align: center;
          text-decoration: none;
          color: #333;

          img {
            width: 60px;
            height: 60px;
            margin-bottom: 8px;
          }

          span {
            display: block;
            font-size: 14px;
          }

          &:hover {
            color: #ff6700;
          }
        }
      }
    }

    .product-section {
      margin-top: 40px;

      .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;

        h2 {
          font-size: 22px;
          font-weight: 200;
          color: #333;
        }

        .more {
          color: #424242;
          text-decoration: none;
          &:hover {
            color: #ff6700;
          }
        }
      }

      .product-list {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 14px;

        .product-card {
          background: #fff;
          padding: 20px;
          text-align: center;
          transition: all .2s;

          img {
            width: 160px;
            height: 160px;
            margin-bottom: 15px;
          }

          h3 {
            font-size: 14px;
            color: #333;
            margin-bottom: 10px;
          }

          .desc {
            font-size: 12px;
            color: #b0b0b0;
            margin-bottom: 10px;
          }

          .price {
            color: #ff6700;
            font-size: 14px;
          }

          &:hover {
            transform: translateY(-2px);
            box-shadow: 0 2px 8px rgba(0,0,0,.1);
          }
        }
      }
    }
  }
}

.container {
  width: 1226px;
  margin: 0 auto;
}
</style> 